<template>
  <div id="organization">
        <!-- 这是橙人组织页面 -->
       <div class="Header-wrapper">
            <yd-navbar title="橙人组织" fontsize="16px" color="#fff" height="45px" bgcolor="#ffd602">
                <router-link to="PersonalIndex" slot="left">
                    <i class="iconfont icon-back Fcolor"></i>
                </router-link>
            </yd-navbar>
        </div>
    <!-- 区域  学校 下拉 -->
    <div class="head-location typelist">
        <select  class="type" @change="changetype"  v-model="changetypeid">
          <option value="0">全部</option>
          <option value="1">短期</option>
          <option value="2">长期</option>
        </select>
    </div>
    <!-- 橙人组织列表 -->
        <div class="organization-list-wrapper" ref="wrapper">
          <transition appear enter-active-class="animated fadeIn" appear-active-class="animated fadeIn">
            <ul>
                <li v-for="item of userList" :key="item.id">
                    <div class="organization-user">
                        <!-- 用户头像 -->
                        <div class="list-user">
                            <i class="iconfont icon-touxiang user-ico"></i>
                        </div>
                        <!-- 用户信息 -->
                        <div class="list-information">
                            <p>{{item.name}}</p>
                            <p>{{item.phone}}</p>
                            <p>{{item.school}}</p>
                        </div>
                    </div>
                    <!-- 删除操作 -->
                    <div class="operation">
                        <span class="job">{{item.job}}</span>
                    <!-- 弹窗 -->
                        <div class="list-delete" v-show="usertype==2" @click="show(item.id)"> 删除</div>
                    </div>
                </li>
            </ul>
            </transition>
        </div>
        <yd-popup v-model="show1" position="center" class="list-popup">
            <div class="popup-content">
                <p class="remind">
                你确定要删除姓名吗？
                </p>
                <p class="popup-pdecision">
                    <yd-button class="cancel" @click.native="show1 = false">取消</yd-button>
                    <yd-button class="delete" @click.native="remove(rid)">删除</yd-button>
                </p>
            </div>
        </yd-popup>
    </div>
</template>
<script type="text/ecmascript-6">
import BScroll from 'better-scroll'
import apis from '../../../../../static/js/apis.js'
export default {
  data () {
    return {
      userList: [],
      show1: false,
      address: [], // 获取数组
      rid: '', // 存id
      changetypeid: '0', // 类型id
      usertype: ''
    }
  },
  methods: {
    changetype () {
      // this.changetypeid = value
      this.$axios.post(apis + '/app/jobinfoapp/stafflist',
        this.confusion(JSON.stringify({
          pid: this.changetypeid + ''
        })), {
          headers: {
            Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
            'Content-Type': 'application/json;charset=UTF-8',
            'Cache-Control': 'no-cache',
            isApp: 'isApp'
          }
        }
      ).then((response) => {
        // console.log(response)
        this.userList = response.data
        // console.log(this.userList.length)
      }).catch((error) => {
        console.log(error)
        this.$dialog.toast({
          mes: '服务器异常'
        })
      })
    },
    show (id) {
      this.show1 = true
      this.rid = id
    },
    remove (rid) {
      this.userList.splice(rid, 1)
      this.$axios.post(apis + '/app/jobinfoapp/deleteuser',
        this.confusion(JSON.stringify({
          userid: rid + ''
        })), {
          headers: {
            Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
            'Content-Type': 'application/json;charset=UTF-8',
            'Cache-Control': 'no-cache',
            isApp: 'isApp'
          }
        }
      ).then((response) => {
        // console.log(response)
        this.$axios.post(apis + '/app/jobinfoapp/stafflist',
          this.confusion(JSON.stringify({
            pid: this.changetypeid + ''
          })), {
            headers: {
              Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
              'Content-Type': 'application/json;charset=UTF-8',
              'Cache-Control': 'no-cache',
              isApp: 'isApp'
            }
          }
        ).then((response) => {
          // console.log(response)
          this.userList = response.data
        }).catch((error) => {
          console.log(error)
          this.$dialog.toast({
            mes: '服务器异常'
          })
        })
      }).catch((error) => {
        console.log(error)
        this.$dialog.toast({
          mes: '服务器异常'
        })
      })
      this.show1 = false
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true,
        taps: true
      })
    })
  },
  created () {
    this.userdeptid = JSON.parse(window.localStorage.getItem('userInfo')).member.deptid
    this.usertype = JSON.parse(window.localStorage.getItem('userInfo')).member.userType
    // console.log(this.userdeptid)
    this.$axios.post(apis + '/app/jobinfoapp/stafflist',
      this.confusion(JSON.stringify({
        pid: this.changetypeid + ''
      })), {
        headers: {
          Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
          'Content-Type': 'application/json;charset=UTF-8',
          'Cache-Control': 'no-cache',
          isApp: 'isApp'
        }
      }
    ).then((response) => {
      // console.log(response)
      this.userList = response.data
      // console.log(this.userList.length)
    }).catch((error) => {
      console.log(error)
      this.$dialog.toast({
        mes: '服务器异常'
      })
    })
  },
  components: {
    apis
  }
}
</script>
<style scoped>
.typelist{
  background: #f1f1f1;
  height: 42px;
  text-align: center;
}
.type{
  line-height: 42px;
  padding: 0 6%;
  border: none;
  text-align: center;
  font-size: 12px;
  background: url("./../../../../assets/img/xiala.png") no-repeat right center transparent;
  background-size: 30px;
  outline: none;
}
.icon-back{
  font-size: 24px;
}
.Fcolor {
  color: #fff;
}
/* 下拉列表 */
.heade-location-wrapper{
    width: 100%;
    height: 42px;
    line-height: 42px;
    text-align: center;
    background: #F1F1F1;
    overflow: hidden;
}
/* 橙人组织列表 */
.organization-list-wrapper{
    position: fixed;
    top: 87px;
    bottom: 0;
    width: 100%;
    overflow: hidden;
}
.organization-list-wrapper ul li {
    display: flex;
    margin-bottom: 6px;
    width: 100%;
    background: #fff;
    overflow: hidden;
    padding:20px 12px;
}
.organization-user{
    flex: 7;
    overflow: hidden;
}
/* 用户头像 */
.list-user{
    width: 60px;
    height: 60px;
   float: left;
   overflow: hidden;
   border-radius: 50%;
   margin-right: 10px;
}
.user-ico{
    width: 100%;
    font-size: 60px;
    color: #FFD602;
}
.list-information{
    float: left;
    overflow: hidden;
}
.list-information p{
    width: 100%;
    line-height: 20px;
    font-size: 14px;
    color: #333;
}
.operation{
    flex: 3;
    overflow: hidden;
    text-align: right;
}
/* 职位 */
.job{
    display: block;
}
/* 删除按钮 */
.list-delete{
    color: #fff;
    width:42px;
    height:22px;
    font-size: 12px;
    background: #FFD602 ;
    margin-top: 20px;
    float: right;
    text-align: center;
    line-height: 22px;
    border-radius: 10px;
}
/* 弹窗 */
.popup-content{
    position: relative;
    width:282px;
    height: 207px;
    border-radius: 5px;
    background: #fff;
}
.remind{
    line-height: 156px;
    font-size: 15px;
    text-align: center;
    color: #333;
}
/* 弹窗底部 */
.popup-pdecision{
    display: flex;
    position: absolute;
    width: 100%;
    height: 56px;
    bottom: 0;
    justify-content: space-around;
    align-items: center;
    background: #F0F0F0;
}
/* 取消，删除按钮 */
.cancel,
.delete{
    width: 112px;
    height: 26px;
    font-size: 11px;
    color: #fff;
    background: #B3B3B3;
}
.delete{
    background: #FF5B5B;
}
</style>
